<template>
  <n-thing style="border: lightgray 1px solid;padding: 20px;border-radius: 5px">
    <template v-if="avatar" #avatar>
      <n-avatar>
        <n-icon>
          <ServerIcon/>
        </n-icon>
      </n-avatar>
    </template>
    <template v-if="header" #header>
      订阅行情
    </template>
    <template v-if="headerExtra" #header-extra>
      <n-tooltip trigger="hover" v-if="subscribeStore.is_subscribed">
        <template #trigger>
          <n-spin size="28">
            <template #icon>
              <n-icon size="28" color="#51D6A9">
                <RunningIcon/>
              </n-icon>
            </template>
          </n-spin>
        </template>
        订阅服务正在运行中
      </n-tooltip>
      <n-tooltip trigger="hover" v-if="subscribeStore.is_subscribed===false">
        <template #trigger>
          <n-icon size="28" color="#FFA60F">
            <PendingIcon/>
          </n-icon>
        </template>
        订阅服务已停止
      </n-tooltip>
    </template>
    <template v-if="description" #description>
      订阅行情服务
    </template>
    从订阅行情服务中获取行情数据。
    <template v-if="action" #action>
      <n-space>
        <n-button :type="subscribeStore.btn_type" tertiary @click="subscribeStock">
          <template #icon v-if="subscribeStore.is_subscribed">
            <n-icon><StopIcon/></n-icon>
          </template>
          <template #icon v-if="subscribeStore.is_subscribed===false">
            <n-icon><PlayIcon/></n-icon>
          </template>
          {{ subscribeStore.btn_text }}
        </n-button>
      </n-space>
    </template>
  </n-thing>
</template>
<script setup lang="ts">
import {MarketService} from "../../../bindings/quant/backend/service";
import {useSubscribeStore} from "../../store/subscribe";
import {
  ReloadCircle as RunningIcon,
  ServerOutline as ServerIcon,
  StopCircle as PendingIcon,
  Play as PlayIcon,
  Stop as StopIcon,
} from "@vicons/ionicons5";
import {ref} from "vue";
import {NIcon} from "naive-ui";

const subscribeStore = useSubscribeStore();


const avatar = ref(true)
const header = ref(true)
const headerExtra = ref(true)
const description = ref(false)
const action = ref(true)

defineProps({})

const subscribeStock = () => {
  if (subscribeStore.is_subscribed) {
    MarketService.Unsubscribe().then((result) => {
      subscribeStore.unsubscribe()
      console.log(result)
    }).catch((err) => {
      console.log("停止订阅 出现错误：" + err);
    });
  } else {
    MarketService.Subscribe().then((result) => {
      subscribeStore.subscribe()
      console.log(result)
    }).catch((err) => {
      console.log("开始订阅 出现错误：" + err);
    });
  }
}
</script>


